import React,{useState,useEffect} from 'react';
import { connect } from 'react-redux';
import {removeCookie} from '../../../utils/cookie';
import axios from 'axios';
import { userInfo , updateInfoAction} from '../../../store/actions';
import style from './index.module.scss';
interface Iprops {
    getInfo: () => void,
    updateInfo: (avatar:string) => void,
    userInfo:{[key:string]:any},
    history:any,
}
const Mine:React.FC<Iprops> = props=>{
    useEffect(() => {
        props.getInfo()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    const handleList = [
        {id:0,title:'我的收藏',icon:'icon-gongzuojilu',path:'/collect'},
        {id:1,title:'地址管理',icon:'icon-address',path:'/adress'},
        {id:2,title:'我的订单',icon:'icon-quanbudingdan-01',path:''},
        {id:3,title:'周末拼单',icon:'icon-riqixuanze',path:''},
        {id:4,title:'优惠卷',icon:'icon-youhuiquan-01',path:''},
        {id:5,title:'优选购',icon:'icon-dazhongdianping',path:''},
        {id:6,title:'我的红包',icon:'icon-paynumber',path:''},
        {id:7,title:'会员plus',icon:'icon-gerenxinxi',path:''},
        {id:8,title:'邀请返利',icon:'icon-faxiandingdan',path:''},
        {id:9,title:'意见反馈',icon:'icon-bianji1',path:''},
        {id:10,title:'客服咨询',icon:'icon-kefu',path:''},
        {id:11,title:'账户安全',icon:'icon-anquanshezhi',path:''},
    ]
    const [tabIndex,setTabIndex] = useState(0);
    const change = (item:{ [key: string]: any },index:number)=>{
        setTabIndex(index); 
        if(!item.path) return alert(`${item.title} 该功能暂未开发，敬请期待`)
        props.history.push(item.path)
    }
    const quit = ()=>{
        (window as any)._hmt.push(['_trackEvent', '退出登录', '退出登录按钮']);
        removeCookie();
        // history.replace('/login')
        props.history.go(0)
    }
    const onload = async (e:any) =>{
        (window as any)._hmt.push(['_trackEvent', '上传头像', '上传头像按钮']);
        const files = e.target.files;
        const form = new FormData();
        Array.from(files).forEach((item:any)=>{
            form.append(item.name,item)
        })
        const result = await axios.post('https://service.jasonandjay.com/upload',form);
        props.updateInfo(result.data.data[0].path);
        props.getInfo()
    }
    return <div className={style.mine}>
        <div className={style.info}>
            <div 
            className={style.left}
            // style={{backgroundImage:`url(${props.userInfo&&props.userInfo.avatar})`}}
            >
                <img src={props.userInfo&&props.userInfo.avatar} alt=""/>
                <input type="file" multiple onChange={e=>onload(e)}/>
            </div>
            <div 
            className={style.right} 

            >
                <p>{props.userInfo&&props.userInfo.username}</p>
                <p>普通用户</p>
            </div>
        </div>
        <div className={style.handle} >
            {
                handleList.map((item,index)=>{
                    return <div 
                    className={[style.item,index===tabIndex?style.active:""].join(" ")}
                    key={item.id}
                    onClick={()=>change(item,index)}
                    >
                        <p>
                            <i className={["iconfont",item.icon].join(' ')}></i>
                        </p>
                        <p>{item.title}</p>
                    </div>
                })
            }
        </div>
        <div className={style.quit}>
            <span onClick={quit}>退出登录</span>
        </div>
    </div>
}
const mapStateToProps = (state: any) => {
    return state.user
}
const mapDispatchToProps = (dispatch: Function) => {
    return {
        getInfo: () => {
            dispatch(userInfo());
        },
        updateInfo:(avatar:string)=>{
            dispatch(updateInfoAction(avatar))
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Mine)
